<template>
	<!-- 封装的上传组件 -->
	<div class="ftable">
		<!-- 遍历表头 -->
		<div class="ftableHead flexaic">
			<!-- 表格内容 -->
			<div class="cell flexaic" :style="{flex:item.flex}" v-for="item,index in clomus" :key="index">
				{{item.text}}
			</div>
		</div>
		<!-- 遍历数据内容 -->
		<div class="ftableBody" :class="{'stripecell':stripe===true}">
			<!-- 表格内容 -->
			<div class="cellbox flexaic" v-for="item,index in dataScoure" :key="index">
				<!-- 遍历表头 -->
				<div class="cellcent" v-for="em,ids in clomus" :key="ids" :style="{flex:em.flex||'1'}">
					<div class="cell flexaic" v-if="!em.slot">
						{{item[em.id]}}{{em.unit||''}}
					</div>
					<slot v-else :name="em.id+index"></slot>
				</div>
			</div>
			<!-- 暂无数据 -->
			<div class="ftabletips flexcent" v-if="!dataScoure.length">
				暂无数据
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ftable', //封装的上传组件
		props: {
			dataScoure: { // 显示的数据	
				type: [Array],
			},
			clomus: { // 表头数据
				type: [Array],
				default: () => {
					return [{
						id: "", //key
						unit: "", //单位
						text: "", //表头
						slot: true, //是否使用插槽
						flex: "", //位置占比
					}]
				}
			},
			stripe: { // 是否为斑马纹 true	
				type: [Boolean],
				default: true
			},
		}
	}
</script>

<style lang="less" scoped>
	// 封装的上传组件
	.ftable {
		width: 100%;

		// 表头内容
		.ftableHead {
			font-size: 26rpx;
			color: #333333;
			height: 60rpx;
			background: #F3F5F9;
			font-weight: 700;

			.cell {
				flex: 1;
				padding: 5rpx;
			}
		}

		// 表格内容
		.ftableBody {
			.cellbox {
				height: 60rpx;
				font-size: 26rpx;
				color: #333333;
				background: #fff;

				.cellcent {
					flex: 1;
					padding: 5rpx;
				}
			}

			.ftabletips {
				min-height: 200rpx;
				color: #9d9d9d;
				font-size: 26rpx;
			}
		}

		.stripecell {
			.cellbox:nth-child(2n) {
				background: #F3F5F9;
			}
		}
	}
</style>